{extend name="homeheader:header"/}
{block name="content"}
	<link rel="stylesheet" type="text/css" href="/home/css/group.css" />
	<body style="overflow-x: hidden;">
		<input type="hidden" value="{$list.id}" id="goods_id" />
		<div class="group">
			<a href="javascript:history.back(-1)" class="back">
				<i class="iconfont">&#xe615;</i></a>
			<div class="clas">
				<div class="layui-carousel" id="lunbo">
					<div carousel-item="" class="banner">
						
					</div>
				</div>
				<div class="txt">
					<p class="fl">
						<!-- <i>已参团：<span>100</span>人</i>
						<i>可参团：<span>100</span>人</i> -->
					</p>
					<p class="fr"><i>团购倒计时：</i><i  id="points"></i></p>
				</div>
			</div>
			<div class="wrap">
					<div class="t_info">
						
					</div>
					<div class="speci">
						<ul>
							<li>
								<div class="row">
									<div class="col-xs-3">
									规格
								</div>
								<div class="col-xs-9" id="info">

								</div>
								</div>
							</li>
							<li>
								<div class="row">
									<div class="col-xs-3">
									单价
								</div>
								<div class="col-xs-9" id="goods_category">

								</div>
								</div>
							</li>
						</ul>
					</div>
					<div class="stp_info">
						<div class="top">
							<h4>商品信息</h4>
							<div id="goods_content"></div>
						</div>
					</div>
					<div class="footer row">
						<div class="col-xs-3" id="carts">
							<p><i class="iconfont">&#xe601;</i></p>
							购物车
						</div>
						<div class="col-xs-2">
							<p><i class="iconfont">&#xe6e0;</i></p>
							联系
						</div>
						<div class="col-xs-7" id="clk">
							<button data-method="offset" data-type="b" class="layui-btn layui-btn-normal">加入团购</button>
						</div>
					</div>
			</div>
		</div>
	</body>
	<div class="cont_wrap" style="display: none;">
		<div class="b_top row">
			<div class="col-xs-4">
				<div class="img" id="goods_img">
					<img src="/home/img/ban-le.png"/>
				</div>
			</div>
			<div class="col-xs-8">
				<p id="goods_name"></p>
				<p id="goods_description"></p>
			</div>
		</div>
		<p>商品规格数量选择</p>
		<div class="b_ct">
			<ul id="g_info">
				<!-- <li>
					<div class="lis_wrap row">
						<div class="col-xs-7">
							<p>小:￥99/件 (1箱8件)</p>
						</div>
							<div class="col-xs-5">
								<div class="input row">
									<input class="addBtn min0" type="button" value="-" />
								<input class="join-money0 nus" type="text" value="1">
								<input class="addBtn add0" type="button" value="+" />
								</div>
						</div>
					</div>
				</li> -->
			</ul>
		</div>
	</div>
	<div class="popup" style="display: none;">
		<div class="mask"></div>
		<div class="box">
			<h2>添加成功</h2>
			<p>已成功添加至购物车！</p>
			<div class="pop">
				<a id="determine">确定</a>
				<a href="{:url('/home/carts/carts')}">去购物车</a>
			</div>
		</div>
	</div>	
<script type="text/javascript">
	/* 倒计时 */

	/* 团购商品详情页 */
	var gid = $('#goods_id').val();
	$.post('/home/goods/productDetail',{id:gid},function(res){
		var data = res.data;
		var imgs = '';
		var str = '';
		var g_infos = '';
		var obj  = new Function("return" + data.g_pic)();
		/* 商品图 */
		for(var i=0;i<obj.photos.length;i++){
			imgUrl = obj.photos[i].url;
			imgs +='<div><img src='+imgUrl+' /></div>';

		}
		/* 商品信息 */
		$('#lunbo .banner').html(imgs);

		str = '<h2>￥'+data.g_cprice+'<small><del>￥'+data.g_oprice+'</del></small></h2><h4>'+data.g_name+'</h4><small>'+data.g_description+'</small>';
		$('.wrap .t_info').append(str);
		$('#goods_content').append(data.g_content);

		/* 参团人数 */
		g_infos = '<i>已参团：<span>'+data.g_number+'</span>人</i><i>可参团：<span>'+data.g_tnumber+'</span>人</i>';
		$('.clas .txt .fl').append(g_infos);

		var times = data.lefttime;
		var timeid = window.setInterval(function () {
			var day=00,
			hour = 00,
			minutes = 00,
			second = 00;//时间默认值
			if (times > 0) {
			day = Math.floor(times / (60 * 60 * 24));
			hour = Math.floor(times / (60 * 60));
			minutes = Math.floor(times / 60) - (hour * 60);
			second = Math.floor(times) - (hour * 60 * 60) - (minutes * 60);
			}
			if(times < 0)  {
				window.clearInterval(timeid);   
			}
			if (day <= 9) day = '0' + day;
			if (hour <= 9) hour = '0' + hour;
			if (minutes <= 9) minutes = '0' + minutes;
			if (second <= 9) second = '0' + second;

			$('#points').html('<span>'+day+'</span>：<span>'+hour+'</span>：<span>'+minutes+'</span>：<span>'+second+'</span>');

			times--;

		}, 1000);
		
	});
	
	/* 商品规格 */
	$.post('/home/goods/goodsInfo',{id:gid},function(res){
		var data = res.data;
		var str = '';
		var cate = '';
		var len = data.length;
		var goods_info = '';
		for(var i=0;i<len;i++){
			str += '<p>'+data[i].i_name+':￥'+data[i].i_price+'/件 ('+data[i].g_unit+''+data[i].i_number+'件)</p>';
			cate += data[i].i_name+'、';
			
		}
		var cate = cate;
		$('#goods_category').append(str);
		var infos = cate.substring(0, cate.lastIndexOf('、'));
		$('#info').append('<span id="specification">'+infos+'</span>');

	},'json');

		/* 弹窗页面 */
	$.post('/home/goods/getClickCart',{id:gid},function(con){

		/* 商品信息 */
		var goods = con.data.goods;
		/* 商品规格 */
		var goodsinfo = con.data.info;

		var imgone = '';
		var goods_info = '';
		var obj  = new Function("return" + goods.g_pic)();
		/* 商品图 */
		for(var i=0;i<obj.photos.length;i++){
			/* 弹窗的一张图片 */
			imgone = obj.photos[0].url;
		}

		$('#goods_img img').attr('src',imgone);
		$('#goods_name').append(goods.g_name);
		$('#goods_description').append(goods.g_description);
		var len = goodsinfo.length;
		for(var a=0;a<len;a++){
			goods_info += '<li><input type="hidden" value='+goodsinfo[a].id+' class="infos'+a+'" />'
						  +'<div class="lis_wrap row">'
						  +'<div class="col-xs-7">'
						  +'<p>'+goodsinfo[a].i_name+':￥<span class="i_price'+a+'">'+goodsinfo[a].i_price+'</span>/件 (<span class="g_unit'+a+'">'+goodsinfo[a].g_unit+'</span><span class="i_number'+a+'">'+goodsinfo[a].i_number+'</span>件)</p>'
						  +'</div>'
						  +'<div class="col-xs-5">'
							+'<div class="input row">'
							+'<input class="addBtn min'+a+'"id='+a+' type="button" value="-" />'
							+'<input class="join-money'+a+' nus" id='+a+' type="text" value="1" />'
							+'<input class="addBtn add'+a+'"id='+a+' type="button" value="+" />'
							+'</div>'
						+'</div>'
					+'</div>'
				+'</li>';
		}

		$('#g_info').append(goods_info);
		$('#g_info').append('<input type="hidden" value='+len+' id="lengths" />');

		//增减

		var nus = $(".nus");
		for(var b=0;b<nus.length;b++){
			$(".add"+b+"").click(function() {
				var ts=$(this).attr("id");
				$(this).prev(".nus").val(parseInt($(".join-money"+ts+"").val()) + 1); //点击加号输入框数值加1
			});

			$(".min"+b+"").click(function(){
				var ts=$(this).attr("id");
			    $(this).next(".nus").val(parseInt($(".join-money"+ts+"").val())-1); //点击减号输入框数值减1
			    if($(this).next(".nus").val()<=0){
			        $(this).next(".nus").val(parseInt($(".join-money"+ts+"").val())+1); //最小值为1
			    }
			});

			$('.join-money'+b+'').keyup(function(){
			    var c=$(this);
			    if(/[^\d]/.test(c.val())){//替换非数字字符
			        var amount=c.val().replace(/[^\d]/g,'');
			        $(this).val(amount);
			    }
			    updateMoney();  //手动输入数值金额随之改变
			});

		}

	},'json');

	$('#carts').click(function(){

		window.location = '/home/carts/carts';
	});

</script>
<script type="text/javascript">
	{$(".footer .col-xs-7 button").height($(".footer").height()+"px")}

	layui.use(['carousel', 'form'], function(){
	  var carousel = layui.carousel
	  ,form = layui.form;
	   carousel.render({
	    elem: '#lunbo'
	    ,interval: 1800
	    ,anim: 'fade'
	    ,height: '290px'
	    ,width:'100%'
	  });
  });
	{$(".footer .col-xs-7 button").height($(".footer").height()+"px")}
	layui.use('layer', function(){ //独立版的layer无需执行这一句
    var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
  
  //触发事件
  var active = {
    offset: function(othis){
      var type = othis.data('type')
      ,text = othis.text();
      layer.open({
        type: 1
        ,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
        ,id: 'clk'+type //防止重复弹出
        ,content: $(".cont_wrap")
        ,btn: '确定'
        ,btnAlign: 'c' //按钮居中
        ,shade: .7 //不显示遮罩
        ,area:['100%','370px']
        ,title: false
        ,closeBtn:1
        ,yes: function(){
	       /* 立即购买 */
    		var gid = $('#goods_id').val();
        	$.post('/home/Carts/addNows',{gid:gid},function(data){
        		var tid = data.data;
        		var len = $('#lengths').val();
        		for(var a=0;a<len;a++){
        			var i_price = $('.i_price'+a+'').text();
        			var i_number = $('.i_number'+a+'').text();
        			var ci_number = $('.join-money'+a+'').val();
        			var iid = $('.infos'+a+'').val();
        			$.post('/home/Carts/addNowsInfo',{gid:gid,tid:tid,i_price:i_price,i_number:i_number,ci_number:ci_number,iid:iid},function(dat){
        				
        			});
        		}

        		$.post('/home/Carts/addNowsTotal',{tid:tid},function(d){
					var t_id = d.data.id;
					var t_total = d.data.t_total;
					layer.msg('提交成功',{icon:6});
					setTimeout(function(){
						window.location="/home/orders/corder/?ids="+t_id+"&total="+t_total+"&gids="+gid;
					},1000);
				},'json');
        	
        	},'json');
        }
      });
    }
  };
  
	$('#clk .layui-btn').on('click', function(){
	  	var othis = $(this), method = othis.data('method');
	    active[method] ? active[method].call(this, othis) : '';
	});

    /* 点击确认 */
  	$('#determine').click(function(){
  		window.location.reload();
		$('.popup').css('display','none');
	});
  
});

$(".layui-layer-title .b_ct .lis_wrap .col-xs-5 .input input").height($(".layui-layer-title .b_ct .lis_wrap .col-xs-5 .input input:nth-child(2)").height()+"px")
$(".layui-layer-title .b_ct .lis_wrap .col-xs-5 .input input").css("line-height",$(".layui-layer-title .b_ct .lis_wrap .col-xs-5 .input input:nth-child(2)").height()+"px")
$(".layui-layer-title .b_ct .lis_wrap .col-xs-5 input:nth-child(2)").height($(".layui-layer-title .b_ct .lis_wrap .col-xs-5 .input input").height())
</script>
</html>
{/block}